<template>
<div class="main-article"
    ref="getheight">
  <div v-if="!isArticle">
  <el-table
    :height="table_height"
    :data="articleList.filter(data => !search || 
    data.articleTitle.toLowerCase().includes(search.toLowerCase()) || 
    data.description.toLowerCase().includes(search.toLowerCase()) || 
    data.articleContent.toLowerCase().includes(search.toLowerCase()) || 
    data.articleDate.toLowerCase().includes(search.toLowerCase()))"
    class="article-table">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      fixed
      prop="articleTitle"
      label="标题">
    </el-table-column>
    <el-table-column
      prop="description"
      label="简介">
    </el-table-column>
    <el-table-column
      prop="articleContent"
      label="内容">
    </el-table-column>
    <el-table-column
      prop="articleDate"
      label="发布日期">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <template>
        <el-input
          clearable
          prefix-icon="el-icon-search"
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/></template>
      </template>
      <template slot-scope="scope">
        <el-button @click="handleClick(true,scope.row)" type="text" size="small">查看</el-button>
        <el-button @click="handleEdit(true,scope.row)" type="text" size="small">编辑</el-button>
        <el-button @click="handleDelete(scope.$index, articleList)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    
    <div class="block">
            <!-- <span class="demonstration">页数较少时的效果</span> -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="innerPage.currentPage" :page-size="innerPage.pageSize" background layout="prev, pager, next" :total="totalCount">
      </el-pagination>
    </div>
  </div>
    <el-card v-if="isArticle" class="article-card" shadow="never">
      <el-button @click="handleClose(isCtrl)" type="text" size="small">关闭</el-button>
      <Article v-if="isSee" ref="articleCard"></Article>
      <NewArticle v-if="isEdi" ref="articleEditor"></NewArticle>
    </el-card>
</div>
</template>

<script>
let _this;
  import { getArticleList } from '../../api/article';
  import Article from './Article';
  import NewArticle from './NewArticle'

  export default {
    name: 'ArticleMg',
    components: {
      Article,
      NewArticle
    },
    props: {
      query: {
        type: Object,
        default(){
          return {}
        }
      },
      apprefs: {
      }
    },
    watch: {
      'query': {
        handler() {
          this.articleList = [],
          this.innerPage.p = 1,
          this.innerPage.size = 5,
          this.getArticles(this.innerPage.currentPage, this.innerPage.pageSize)
        }
      }
    },
    data() {
      return {
        isCtrl: '',
        isSee: false,
        isEdi: false,
        isDel: false,
        table_height: '',
        isArticle: false,
        drawer: false,
        direction:"ttb",
        innerPage: {
          currentPage: 1,
          pageSize: 10,
        },
        totalCount: 10,
        articleList: [],
        search: '',
      }
    },
    created() {
      this.getArticles(this.innerPage.currentPage, this.innerPage.pageSize)
      
    },
    mounted(){
      this.$nextTick(() => {
        let headerHeight = this.apprefs.header.$el.offsetHeight;
        let height = document.body.clientHeight - headerHeight;
        this.table_height = height - 20 + 'px';
      })
    },
    methods: {
      load() {
            this.getArticles(this.innerPage.currentPage, this.innerPage.pageSize)
      },
      // handleClose(done){
      //   this.$confirm('确认关闭？').then(_ =>{
      //     done();
      //   }).catch(_ => {
      //     console.log(_);
      //   })
      // },
      // 点击查看
      handleClick(val,row) {
        this.isCtrl = 'see';
        this.isSee = val;
        this.isArticle = true;
        // console.log("传递给子组件的数据：",row);
        let newRow = JSON.parse(JSON.stringify(row));
        console.log("转后传给子组件：",newRow)
        // this.$refs.articleCard.articleUp(newRow)
        this.$nextTick(() => {
          
        this.$refs.articleCard.detial = newRow
        })
        console.log(this.$refs.articleCard)
        this.drawer=true
      },
      // 点击编辑
      handleEdit(val, row) {
        this.isArticle = true;
        this.isCtrl = 'edi';
        this.isEdi = val;
        // Bus.$emit('articleEditor', true)
        this.$nextTick(() => {
          this.$refs.articleEditor.contentForm = row
          this.$refs.articleEditor.articleEditor = true
        })

        // console.log(index, row);
      },
      // 点击删除
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          row.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      handleClose(val){
        if(val == 'see'){
          this.isSee = false
        }else if(val == 'edi'){
          this.isEdi = false
          this.$nextTick(() => {
            this.$refs.articleEditor.articleEditor = false
          })
        }else if(val == 'del'){
          this.isDel = false
        }
        this.isCtrl = '';
        this.isArticle = false;
      },
      // 获取文章列表
      getArticles(pp,ps){
        let that = this;
        that.query.p = pp;
        that.query.size = ps;
        getArticleList(that.query).then(res => {
            that.totalCount = res.total
            let newArticleList = res.data
            that.articleList = newArticleList
        }).catch(error => {
                if(error !== 'error'){
                    that.$message({type: 'error', message: '文章加载失败', showClose: true})
                }
            }).finally(()=> {
                // that.loading = false
            })
      },
      
       handleSizeChange(val) {
            // console.log(val)
            this.innerPage.pageSize = val
            getArticles(val,5)
            this.innerPage.currentPage = 1
        },
        // 点击分页组件后
        handleCurrentChange(val) {
            console.log(val)
            // 改变默认的页数
            this.currentPage=val
            // 切换页码时，要获取每页显示的条数
            // this.getArticles(this.innerPage.PageSize,(val)*(this.innerPage.pageSize))
            this.getArticles(val,this.innerPage.pageSize)
        }
    },
  }
</script>


<style scoped>
.article-table >>> .cell{
  display:block;
  padding: 5px 20px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-table{
  border: 0;
  overflow: hidden;
}

.main-article {
  width: 100%;
  height: 100%;
}

.article-card {
  width: 100%;
  height: 100%;
  position: relative !important;
  z-index: 997;
  left: 0;
  top: 0;
}
.article-card button{
  float: right;
  z-index: 996;
  position: fixed;
  top: 80px;
  right: 30px;
}
.main-article .block {
  position: fixed;
  bottom: 2%;
  right: 10%;
  z-index: 1002;
}
</style>